<template>
  <div class="carousel-demo">
    <el-card>
      <template #header>
        <h3>文章轮播图组件演示</h3>
      </template>
      
      <el-row :gutter="24">
        <!-- 新闻轮播 -->
        <el-col :span="8">
          <h4>新闻轮播</h4>
          <ArticleCarousel
            :articles="newsArticles"
            height="300px"
            :interval="4000"
            @article-click="handleArticleClick"
            @slide-change="handleSlideChange"
          />
        </el-col>
        
        <!-- 活动轮播 -->
        <el-col :span="8">
          <h4>活动轮播</h4>
          <ArticleCarousel
            :articles="activityArticles"
            height="300px"
            :interval="5000"
            arrow="always"
            @article-click="handleArticleClick"
          />
        </el-col>
        
        <!-- 讨论轮播 -->
        <el-col :span="8">
          <h4>讨论轮播</h4>
          <ArticleCarousel
            :articles="discussionArticles"
            height="300px"
            :interval="6000"
            indicator-position="none"
            :show-summary="false"
            @article-click="handleArticleClick"
          />
        </el-col>
      </el-row>
      
      <el-divider />
      
      <!-- 配置选项 -->
      <el-row :gutter="24">
        <el-col :span="12">
          <h4>轮播配置</h4>
          <el-form label-width="120px">
            <el-form-item label="自动播放">
              <el-switch v-model="carouselConfig.autoplay" />
            </el-form-item>
            <el-form-item label="播放间隔">
              <el-input-number v-model="carouselConfig.interval" :min="1000" :max="10000" :step="1000" />
              <span style="margin-left: 8px;">毫秒</span>
            </el-form-item>
            <el-form-item label="箭头显示">
              <el-select v-model="carouselConfig.arrow">
                <el-option label="悬停显示" value="hover" />
                <el-option label="始终显示" value="always" />
                <el-option label="不显示" value="never" />
              </el-select>
            </el-form-item>
            <el-form-item label="指示器位置">
              <el-select v-model="carouselConfig.indicatorPosition">
                <el-option label="外部" value="outside" />
                <el-option label="内部" value="" />
                <el-option label="不显示" value="none" />
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        
        <el-col :span="12">
          <h4>显示配置</h4>
          <el-form label-width="120px">
            <el-form-item label="显示摘要">
              <el-switch v-model="displayConfig.showSummary" />
            </el-form-item>
            <el-form-item label="显示日期">
              <el-switch v-model="displayConfig.showDate" />
            </el-form-item>
            <el-form-item label="显示分类">
              <el-switch v-model="displayConfig.showCategory" />
            </el-form-item>
            <el-form-item label="可点击">
              <el-switch v-model="displayConfig.clickable" />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      
      <el-divider />
      
      <!-- 自定义轮播 -->
      <h4>自定义配置轮播</h4>
      <ArticleCarousel
        :articles="allArticles"
        height="400px"
        :interval="carouselConfig.interval"
        :arrow="carouselConfig.arrow"
        :indicator-position="carouselConfig.indicatorPosition"
        :autoplay="carouselConfig.autoplay"
        :show-summary="displayConfig.showSummary"
        :show-date="displayConfig.showDate"
        :show-category="displayConfig.showCategory"
        :clickable="displayConfig.clickable"
        @article-click="handleArticleClick"
        @slide-change="handleSlideChange"
      />
      
      <!-- 操作按钮 -->
      <div style="margin-top: 20px; text-align: center;">
        <el-button @click="loadMoreArticles">加载更多文章</el-button>
        <el-button type="primary" @click="refreshArticles">刷新文章</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import ArticleCarousel from '@/components/ArticleCarousel.vue'

// 响应式数据
const carouselConfig = ref({
  autoplay: true,
  interval: 5000,
  arrow: 'hover' as 'always' | 'hover' | 'never',
  indicatorPosition: 'outside' as 'outside' | 'none' | ''
})

const displayConfig = ref({
  showSummary: true,
  showDate: true,
  showCategory: true,
  clickable: true
})

// 模拟文章数据
const newsArticles = ref([
  {
    id: 1,
    title: '重要新闻：公司获得行业大奖',
    summary: '我公司在2024年度行业评选中荣获"最佳创新企业"奖项，这是对我们技术实力的认可。',
    image: 'https://picsum.photos/800/400?random=1',
    author: '新闻部',
    publishTime: '2024-01-15',
    categoryName: '公司新闻'
  },
  {
    id: 2,
    title: '产品发布：新一代智能解决方案上线',
    summary: '经过一年的研发，我们的新一代智能解决方案正式发布，为客户提供更优质的服务。',
    image: 'https://picsum.photos/800/400?random=2',
    author: '产品部',
    publishTime: '2024-01-10',
    categoryName: '产品动态'
  },
  {
    id: 3,
    title: '市场拓展：成功签约重要客户',
    summary: '公司与多家知名企业达成战略合作协议，业务范围进一步扩大。',
    image: 'https://picsum.photos/800/400?random=3',
    author: '市场部',
    publishTime: '2024-01-05',
    categoryName: '商务合作'
  }
])

const activityArticles = ref([
  {
    id: 4,
    title: '年度团建活动圆满结束',
    summary: '公司组织的年度团建活动在美丽的海滨城市举行，员工们度过了愉快的时光。',
    image: 'https://picsum.photos/800/400?random=4',
    author: '人事部',
    publishTime: '2024-01-20',
    categoryName: '员工活动'
  },
  {
    id: 5,
    title: '技术分享会：AI技术应用实践',
    summary: '邀请行业专家分享AI技术在实际项目中的应用经验，现场互动热烈。',
    image: 'https://picsum.photos/800/400?random=5',
    author: '技术部',
    publishTime: '2024-01-18',
    categoryName: '技术交流'
  },
  {
    id: 6,
    title: '慈善活动：关爱留守儿童',
    summary: '公司组织员工参与慈善活动，为山区留守儿童送去温暖和关爱。',
    image: 'https://picsum.photos/800/400?random=6',
    author: '公益部',
    publishTime: '2024-01-12',
    categoryName: '公益活动'
  }
])

const discussionArticles = ref([
  {
    id: 7,
    title: '讨论：远程办公的利与弊',
    summary: '随着疫情的影响，远程办公成为新常态，我们来讨论一下它的优缺点。',
    image: 'https://picsum.photos/800/400?random=7',
    author: '张三',
    publishTime: '2024-01-25',
    categoryName: '工作讨论'
  },
  {
    id: 8,
    title: '技术讨论：前端框架选择',
    summary: '在新项目中应该选择哪个前端框架？Vue、React还是Angular？',
    image: 'https://picsum.photos/800/400?random=8',
    author: '李四',
    publishTime: '2024-01-22',
    categoryName: '技术讨论'
  },
  {
    id: 9,
    title: '产品讨论：用户体验优化',
    summary: '如何提升产品的用户体验？欢迎大家分享自己的想法和建议。',
    image: 'https://picsum.photos/800/400?random=9',
    author: '王五',
    publishTime: '2024-01-19',
    categoryName: '产品讨论'
  }
])

// 计算属性
const allArticles = computed(() => {
  return [...newsArticles.value, ...activityArticles.value, ...discussionArticles.value]
})

// 方法
const handleArticleClick = (article: any) => {
  ElMessage.success(`点击了文章：${article.title}`)
  console.log('点击的文章:', article)
}

const handleSlideChange = (index: number, article: any) => {
  console.log(`轮播切换到第${index + 1}张：${article.title}`)
}

const loadMoreArticles = () => {
  const newArticle = {
    id: Date.now(),
    title: `新文章 ${Date.now()}`,
    summary: '这是一篇新加载的文章，用于演示动态加载功能。',
    image: `https://picsum.photos/800/400?random=${Date.now()}`,
    author: '系统',
    publishTime: new Date().toISOString().split('T')[0],
    categoryName: '动态内容'
  }
  
  newsArticles.value.push(newArticle)
  ElMessage.success('已添加新文章')
}

const refreshArticles = () => {
  // 模拟刷新数据
  newsArticles.value = newsArticles.value.map(article => ({
    ...article,
    image: `https://picsum.photos/800/400?random=${Date.now() + Math.random()}`
  }))
  
  ElMessage.success('文章数据已刷新')
}

onMounted(() => {
  console.log('文章轮播演示页面已加载')
})
</script>

<style scoped lang="scss">
.carousel-demo {
  padding: 20px;
  
  h4 {
    margin: 0 0 16px 0;
    color: #303133;
    font-size: 16px;
    font-weight: 600;
  }
  
  .el-divider {
    margin: 32px 0;
  }
  
  .el-form {
    .el-form-item {
      margin-bottom: 16px;
    }
  }
}
</style>
